<template>
  <div class="login-page">
    <div class="login-page-content">
      <p class="login-page-title">
        <i class="el-icon-user-solid"></i>
        <span>登录预算管家</span>
      </p>
      <el-form class="e-form" ref="form" :model="form">
        <el-form-item>
          <el-input @keyup.enter.native="toLogin" placeholder="设计师姓名" v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input @keyup.enter.native="toLogin" type="password" placeholder="登录密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item class="login-page-code">
          <el-input @keyup.enter.native="toLogin" placeholder="验证码" v-model="form.code"></el-input>
          <span class="verify-code" @click="getVerifyCode">
            <img :src="verifyCode" />
          </span>
          
        </el-form-item>
        <el-form-item class="form-item-btn">
          <el-button type="primary" :loading="loading" @click="toLogin">登录</el-button>
          <el-button type="text">企业主管登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import '../styles/login.scss';
import {login, getVerifyCode} from '@/utils/api';
import storage from '@/utils/storage';
export default {
  data () {
    return {
      form: {},
      loading: false,
      verifyCode: ''
    }
  },

  created () {
    this.getVerifyCode();
  },

  methods: {
    getVerifyCode () {
      const num = Math.ceil(Math.random() * 10); // 生成一个随机数（防止缓存）
      this.verifyCode = getVerifyCode + '?width=100&height=38&' + num;
    },
    toLogin () {
      const params = Object.assign({}, this.form)
      if (!params.account) {
        this.$message.warning('请输入登录名');
        return false;
      } 
      if (!params.password) {
        this.$message.warning('请输入登录密码');
        return false;
      }
      if (!params.code) {
        this.$message.warning('请输入验证码');
        return false;
      }
      this.loading = true;
      login (params).then((res) => {
        this.loading = false;
        storage.setItem('user_value', res);
        this.$message.success({
          message: '登录成功'
        })
        this.$router.push('/')
      }).catch((err) => {
        this.getVerifyCode();
        this.loading = false;
      })
    }
  }
}
</script>
